<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>拼多多</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style media="screen">
        #app {
            width: 100%;
            overflow: hidden;
            background: linear-gradient(266deg, #7D0DFC, #D116FD);
        }

        header {
            width: 100%;
            height: 44px;
        }

        header span {
            display: block;
            width: 44px;
            height: 44px;
            background: url(../../image/white_back.png) no-repeat;
            background-size: 22px 22px;
            background-position: center;
            position: absolute;
        }

        .title {
            width: 100%;
            padding: 0 80px;
            display: flex;
            box-sizing: border-box;
            overflow: hidden;
        }

        .title .title_l {
            width: 38px;
            height: 38px;
            background: url(../../image/pdd_icon_2.png) no-repeat;
            background-size: 100% 100%;
        }

        .title .title_r {
            margin-left: 9px;
        }

        .title_r div:first-child {
            width: 100%;
            height: 19px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 800;
            color: #FFFFFF;
            line-height: 19px;
        }

        .title_r div:last-child {
            width: 100%;
            height: 14px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 14px;
            margin-top: 6.5px;
        }

        .search {
            width: 100%;
            height: 30px;
            margin-top: 18px;
            margin-bottom: 20px;
            padding: 0 38px;
        }

        .search_inner {
            width: 100%;
            height: 100%;
            background: linear-gradient(266deg, #7D0DFC, #D116FD);
            background: #FFFFFF;
            border-radius: 15px;
            display: flex;
            justify-content: space-between;
        }

        .search_r {
            width: 58px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            background: linear-gradient(266deg, #BF14FD, #7D0DFC);
            border-radius: 12.5px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-right: 5px;
            margin-top: 2.5px;
        }
        .search_l{
          width: 100%;
          height: 25px;
          display: flex;
          flex: 1;
          margin-top: 2.5px;
        }
        .search_l span{
          width: 15px;
          height: 14px;
          background: url(../../image/blue_search_icon.png) no-repeat;
          background-size: 100% 100%;
          margin-left:10px;
          margin-top: 6px;
        }
        .search_l input{
          width: 100%;
          display: block;
          flex: 1;
          min-width: 0;
          height: 25px;
          line-height: 26px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-left: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">
            <span tapmode @click="closeWin()"></span>
        </header>
        <div class="title">
            <div class="title_l"></div>
            <div class="title_r">
                <div>拼多多全网优惠</div>
                <div>领券下单最高省千元</div>
            </div>
        </div>
        <div class="search">
            <div class="search_inner">
                <div class="search_l">
                  <span></span>
                  <input type="text" name="" value="" placeholder="输入商品名称或粘贴宝贝标题" v-model='keyword'>
                </div>
                <div class="search_r" @click='searchEvent()'>搜索</div>
            </div>
        </div>

    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        var header = $api.byId('app');
        var headerH = $api.fixStatusBar(header);
        console.log(headerH);
        api.openFrame({
            name: 'pdd_frame',
            url: './pdd_frame.html',
            rect: {
                marginTop: headerH+30,
                marginBottom: api.safeArea.bottom, // main页面距离win底部的高度
                w: 'auto'
            },
            bounces: true,
            bgColor: '#FAF9F9',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
        vm.getIndexCateGory()

    }
    var vm = new Vue({
        el: '#app',
        data: {
            keyword:''
        },
        methods: {
          searchEvent:function(){
            if(!vm.keyword){
              cl.toast({
                msg:'输入商品名称或粘贴宝贝标题'
              });
              return;
            }
            cl.openWin({
                name: 'search',
                pageParam:{
                  keyWord:vm.keyword
                }
            });
          },
          /**
           *
           * 获取首页小分类
           * @return {[type]} [description]
           */
          getIndexCateGory: function() {
              api.ajax({
                  url: cl.apiServer + 'category/getCategoryList',
                  method: 'post',
                  headers: {
                      'Content-Type': 'application/json;charset=utf-8',
                      token:cl.userToken
                  },
                  data: {
                      body: {
                          parentId: 0,
                          ctype:2,
                          version:cl.deviceInfo().appVersion,
                          mobileInfo:cl.systemType()
                      }
                  }
              }, function(ret, err) {
                  // alert(JSON.stringify(ret));
                  if (ret) {
                      if (ret.code == 0) {
                          vm.navHeadLength = ret.data.length;
                          var classifyArr = [{
                              title: '推荐',
                              bg: "",

                              size: {
                                  w: '50',
                                  h: 20
                              },
                              id: ''
                          }];

                          for (var i = 0; i < ret.data.length; i++) {
                              var obj = {};
                              obj.cid = ret.data[i].cid;
                              obj.title = ret.data[i].cname;
                              obj.bg = '';
                              obj.size = {
                                  w: '50',
                                  h: 20
                              };
                              classifyArr.push(obj);
                          }
                          vm.initNavList(classifyArr);
                      }
                  }
              });
          },
          initNavList: function(items) {
              var header = $api.byId('app');
              var offsetH = $api.offset(header).h;
              console.log(offsetH);

              // var offsetH = $api.fixStatusBar($api.byId('app'));
              var NVNavigationBar = api.require('NVNavigationBar');
              NVNavigationBar.open({
                  rect: {
                      x: 15,
                      y: offsetH+10,
                      w: api.frameWidth,
                      h: 20
                  },
                  styles: {
                      orientation: 'horizontal',
                      bg: '',
                      // bgAlpha: 1,
                      font: {
                          size: 15,
                          sizeSelected: 15,
                          color: '#999999',
                          colorSelected: '#333333',
                          bold: true
                      },
                      itemSize: {
                          w: '50',
                          h: 20
                      }
                  },
                  items: items,
                  selectedIndex: 0,
                  fixedOn: api.frameName,
                  id: 'first'
              }, function(ret, err) {
                  console.log(JSON.stringify(ret));
                  if (ret.eventType == 'click') {
                    var jsfun1 = 'vm.clearData()';
                    api.execScript({
                        frameName: 'pdd_frame',
                        script: jsfun1
                    });
                     for (var i = 0; i < items.length; i++) {
                          if(ret.index==i){
                            api.sendEvent({
                                name: 'getPdd',
                                extra: {
                                    cid:items[ret.index].cid
                                }
                            });

                          }
                     }
                  }
              });
          },
            closeWin: function() {
                cl.closeWin({
                    name: 'pdd'
                })
            }
        }
    });
</script>

</html>
